<template>
  <div class="fuyunmu6 base-background-img">
    <div class="ang" @click="playFun(ang)">
        <img src="~@/assets/youxiaoxianjie/fuyunmu/6/ang.png">
    </div>
    <div class="eng" @click="playFun(eng)">
        <img src="~@/assets/youxiaoxianjie/fuyunmu/6/eng.png">
    </div>
    <div class="ing" @click="playFun(ing)">
        <img src="~@/assets/youxiaoxianjie/fuyunmu/6/ing.png">
    </div>
    <div class="ong" @click="playFun(ong)">
        <img src="~@/assets/youxiaoxianjie/fuyunmu/6/ong.png">
    </div>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  export default {
    name: 'fuyunmu6',
    data () {
      return {
        isshowpdf: false,
        infourl: '',
        info: '',
        ang: {
          url: 'static/youxiao/pdf/fuyunmu/ang.pdf',
          data: []
        },
        eng: {
          url: 'static/youxiao/pdf/fuyunmu/eng.pdf',
          data: []
        },
        ing: {
          url: 'static/youxiao/pdf/fuyunmu/ing.pdf',
          data: []
        },
        ong: {
          url: 'static/youxiao/pdf/fuyunmu/ong.pdf',
          data: []
        }
      }
    },
    methods: {
      playFun: function (item) {
        console.log(item)
        this.isshowpdf = true
        this.pdfurl = item.url
        this.info = item.data
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.fuyunmu6 {
  background: url(~@/assets/youxiaoxianjie/fuyunmu/6/bg.png);
}
.fuyunmu6 > div {
  position: absolute; 
}
.ang {
  top: 220px;
  left: 295px;
}
.eng {
  top: 225px;
  left: 720px;
}
.ing {
  top: 405px;
  left: 328px;
}
.ong {
  top: 445px;
  left: 687px;
}
</style>
